<template>
	<div>
		<swiper :lunbotuList='bannerList'></swiper>
		<ul class="mui-table-view" style="margin-top: 10px; box-shadow: 0 0 3px #ccc;">
				<li class="mui-table-view-cell mui-media" v-for="(item,index) in newsList" :key='index'>
					<router-link :to="'/home/newsinfo/'+index">
						<img class="mui-media-object mui-pull-left" :src="item.imgUrl" style="width: 80px;height: 50px;max-width: 80px;">
						<div class="mui-media-body">
							<h1>{{ item.title }}</h1>
							<p class="mui-ellipsis">
								<span>发表时间：{{ item.add_time }}</span>
								<span>点击：{{ item.click }}次</span>
							</p>
						</div>
					</router-link>
				</li>
			</ul>
	</div>
</template>

<script>
	import { Toast } from 'mint-ui'
	import swiper from '../subcomponents/swiper.vue'
	export default {
		data() {
			return {
				newsList: [],
				bannerList:[],
			};
		},
		created() {
			this.getNewsList();
		},
		methods: {
			getNewsList() {
				this.$http.get('data.php').then(result => {
					if(result.body.status == true) {

						this.newsList = result.body.news_datas;
						this.bannerList = result.body.banner_imgs
						
					} else {
						Toast('获取新闻列表失败...');
					}
				})
			}
		},
		components:{
			swiper
		}
	}
</script>

<style lang="scss" scoped>
	img{
			/*border-radius: 50%;*/	
		}
	.mui-media-body{
		h1{
			font-size: 14px;
			font-weight: normal;
			text-overflow: ellipsis;
			overflow: hidden;
		}
		.mui-ellipsis{
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			margin-top: 10px;
			span{
				font-size: 12px;
				color: #666;
			}
		}
	}
</style>